<template>
  <a-drawer
    :title="title"
    width="90%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-row>
          <a-col :md="8" :span="7">
            <a-form-model-item label="物品名称" prop="Name">
              <a-input v-model="entity.Name" autocomplete="off" placeholder="请输入物品名称" @blur="inputblur">
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :span="7">
            <a-form-model-item label="物品编码" prop="Code">
              <a-input v-model="entity.Code" autocomplete="off" placeholder="编码"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :span="7">
            <a-form-model-item label="物品简称" prop="SimpleName">
              <a-input v-model="entity.SimpleName" placeholder="请输入物品简称" autocomplete="off"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="8" :span="7">
            <a-form-model-item label="物品类型" prop="MaterialTypeId">
              <a-tree-select
                v-model="entity.MaterialTypeId"
                allowClear
                showSearch
                :disabled="displayName"
                treeNodeFilterProp="title"
                :treeData="MaterialTypeTreeData"
                placeholder="请选择物品类型"
              ></a-tree-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :span="7">
            <a-form-model-item label="物品规格" prop="Spec">
              <a-input v-model="entity.Spec" autocomplete="off" placeholder="请输入物品规格"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :span="7">
            <a-form-model-item label="仓储单位" prop="storageId">
              <measure-select v-model="entity.storageId" @select="handleChoose"></measure-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="8" :span="7">
            <a-form-model-item label="采购单位" prop="purchaseId">
              <measure-select v-model="entity.purchaseId" @select="handleChoose"></measure-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :span="7">
            <a-form-model-item label="销售单位" prop="saleId">
              <measure-select v-model="entity.saleId" @select="handleChoose"></measure-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :span="7">
            <a-form-model-item label="生产单位" prop="productionId">
              <measure-select v-model="entity.productionId" @select="handleChoose"></measure-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="8" :span="7">
            <a-form-model-item label="批次管理" prop="IsBatch">
              <a-radio-group
                v-model="entity.IsBatch"
                :default-value="true"
                button-style="solid"
                @change="IsBatchChange"
              >
                <a-radio-button :value="true"> 是</a-radio-button>
                <a-radio-button :value="false"> 否</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item
              label="寄售标识"
              prop="IsConsignment"
              style="position: absolute;right: 0;top: 0;width: 50%;"
              :labelCol="{ span: 12 }"
              :wrapperCol="{ span: 12 }"
            >
              <a-radio-group v-model="entity.IsConsignment" :default-value="true" button-style="solid">
                <a-radio-button :value="true"> 是</a-radio-button>
                <a-radio-button :value="false"> 否</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
            <!-- <a-form-model-item
              label="扫码管理"
              prop="IsBecode"
              style="position: absolute;right: 0;top: 0;width: 50%;"
              :labelCol="{ span: 12 }"
              :wrapperCol="{ span: 12 }"
            >
              <a-radio-group v-model="entity.IsBecode" :default-value="true" button-style="solid">
                <a-radio-button :value="true"> 是 </a-radio-button>
                <a-radio-button :value="false"> 否 </a-radio-button>
              </a-radio-group>
            </a-form-model-item> -->
          </a-col>

          <a-col :md="8" :span="7" v-if="entity.IsBecode">
            <a-row>
              <a-col :span="1"></a-col>
              <a-col :span="11">
                <a-form-model-item
                  prop="IsQrCode"
                  :labelCol="{ span: 0 }"
                  :wrapperCol="{ span: 24 }"
                  style="text-align: right;"
                >
                  <a-radio-group
                    v-model="entity.IsQrCode"
                    :default-value="true"
                    button-style="solid"
                    @change="IsQrCodechange"
                  >
                    <a-radio :value="false"> 二维码</a-radio>
                    <a-radio :value="true"> 条形码</a-radio>
                  </a-radio-group>
                </a-form-model-item
                >
              </a-col
              >
              <a-col :span="12" v-if="!entity.IsQrCode">
                <a-form-model-item
                  prop="IsSingle"
                  :labelCol="{ span: 0 }"
                  :wrapperCol="{ span: 24 }"
                  style="text-align: center;"
                >
                  <a-radio-group v-model="entity.IsSingle" :default-value="false" button-style="solid">
                    <a-radio :value="true"> 一物一码</a-radio>
                    <a-radio :value="false"> 一品一码</a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :md="8" :span="7" v-if="entity.IsQrCode && entity.IsBecode">
            <a-form-model-item label="条码" prop="BarCode">
              <a-input v-model="entity.BarCode" :maxLength="13" autocomplete="off" placeholder="请输入条码"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :md="8" :span="7">
            <a-form-model-item label="启用包装规格" prop="IsSpec">
              <a-radio-group v-model="entity.IsSpec" :default-value="true" button-style="solid">
                <a-radio-button :value="true"> 是</a-radio-button>
                <a-radio-button :value="false"> 否</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item
              label="保质期管理"
              prop="IsPeriodOfValidity"
              style="position: absolute;right: 0;top: 0;width: 50%;"
              :labelCol="{ span: 12 }"
              :wrapperCol="{ span: 12 }"
              v-if="entity.IsBatch"
            >
              <a-radio-group
                @change="IsPeriodOfValidity"
                v-model="entity.IsPeriodOfValidity"
                :default-value="true"
                button-style="solid"
              >
                <a-radio-button :value="true"> 是</a-radio-button>
                <a-radio-button :value="false"> 否</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>

          <a-col :md="8" :span="7" v-if="entity.IsPeriodOfValidity">
            <a-form-model-item label="保质期单位" prop="PeriodOfValidityUnit">
              <a-select
                v-model="entity.PeriodOfValidityUnit"
                @change="entity.PeriodOfValidity = null"
                placeholder="请选择保质期单位"
              >
                <a-select-option value="年">
                  年
                </a-select-option>
                <a-select-option value="月">
                  月
                </a-select-option>
                <a-select-option value="日">
                  日
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col v-if="entity.IsPeriodOfValidity" :md="8" :span="7">
            <a-form-model-item label="保质期" prop="PeriodOfValidity">
              <a-input
                @change="onChange"
                type="number"
                :min="0"
                v-model="entity.PeriodOfValidity"
                placeholder="请输入保质期"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="8" :span="7">
            <a-form-model-item label="品牌" prop="Brand">
              <a-input v-model="entity.Brand" autocomplete="off" placeholder="请输入品牌"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :span="7">
            <!--            <a-form-model-item label="默认仓库" prop="StorId">-->
            <!--              <a-tree-select-->
            <!--                allowClear-->
            <!--                :treeData="ParentIdTreeData"-->
            <!--                placeholder="请选择默认仓库"-->
            <!--                @change="SelectOrgan"-->
            <!--                v-model="entity.StorId"-->
            <!--              ></a-tree-select>-->
            <!--            </a-form-model-item>-->
            <a-form-model-item label="产地" prop="Producer">
              <a-input v-model="entity.Producer" placeholder="请输入产地" autocomplete="off"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :span="7">
            <a-form-model-item label="等级" prop="Level">
              <a-select v-model="entity.Level">
                <a-select-option
                  v-for="(item, index) in LevelList"
                  :value="item.Id"
                  :key="index"
                >{{ item.DicName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="8" :span="7">
            <a-form-model-item label="出库规则" prop="OutboundRules">
              <a-select v-model="entity.OutboundRules">
                <a-select-option
                  v-for="(item, index) in OutboundRulesList"
                  :value="item.Id"
                  :key="index"
                >{{ item.DicName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :span="7">
            <a-form-model-item label="库存上限" prop="Max">
              <a-input-number
                v-model="entity.Max"
                placeholder="库存上限"
                :style="{ width: '100%' }"
                autocomplete="off"
              />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :span="7">
            <a-form-model-item label="库存下限" prop="Min">
              <a-input-number v-model="entity.Min" placeholder="下限" :style="{ width: '100%' }" autocomplete="off" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="8" :span="7">
            <a-form-model-item label="大包装数量" prop="MaxPackageNum" v-if="entity.IsSpec">
              <a-input v-model="entity.MaxPackageNum" type="number" autocomplete="off" />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :span="7">
            <a-form-model-item label="小包装数量" prop="PackageNum" v-if="entity.IsSpec">
              <a-input v-model="entity.PackageNum" autocomplete="off" />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :span="7" style="position: relative;">
            <a-form-model-item label="备注" prop="Remarks" style="position: absolute;z-index: 1;width: 100%;">
              <a-textarea v-model="entity.Remarks" autocomplete="off" style="height: 100px; width: 700px"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button
        :style="{ marginRight: '8px' }"
        @click="
          () => {
            this.visible = false
          }
        "
      >取消
      </a-button
      >
      <a-button type="primary" @click="handleSubmit" :loading="loading">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
// import EnumSelect from './BaseEnumSelect'
// import StorageSelect from '../../../components/Storage/StorageSelect'
// import CustomerSelect from '../../../components/PB/CustomerSelect'
// // import MaterialTypeSelect from '../../../components/PB/MaterialTypeSelectList'
// import SupplierSelect from '../../../components/PB/SupplierSelect'
import MeasureSelect from '../../../components/PB/units/unitsMeasurement'
// import ProcecureMainSelect from '../../../components/PB/ProcecureMainSelect'
// import CompanySelect from '../../../components/PB/CompanySelect'
// import CUploadImg from '@/components/CUploadImg/CUploadImg'
// import ProductSelcet from './ProductSelcet.vue'

function validatePass2 (rule, value, callback) {
  console.log()
  if (/^([a-zA-Z]|[0-9]){13}$/.test(value)) {
    callback()
  } else {
    callback(new Error('条码格式为数字或字母必须为13个字符'))
  }
}

export default {
  components: {
    // EnumSelect,
    // StorageSelect,
    MeasureSelect
    // // CustomerSelect,
    // // MaterialTypeSelect,
    // SupplierSelect,
    // ProcecureMainSelect,
    // CompanySelect,
    // CUploadImg,
    // ProductSelcet
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    parentObj: Object
  },
  data () {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
        falsesshow: false
      },
      OutboundRulesList: [],
      MaterialTypeTreeData: [],
      ProcecureSubTypeTreeData: [],
      LevelList: [],
      visible: false,
      loading: false,
      storids: '',
      entity: {
        IsBatch: true,
        IsConsignment: false,
        IsBecode: true,
        IsQrCode: true,
        IsSingle: false,
        IsSpec: true,
        MaxPackageNum: 0,
        PeriodOfValidity: '',
        PackageNum: 0,
        IsPeriodOfValidity: true
      },
      rules: {
        // Code: [{ required: true, message: '请输入物品编号', trigger: 'blur' }],
        Name: [{ required: true, message: '请输入物品名称', trigger: 'blur' }],
        MaterialTypeId: [{ required: true, message: '请选择物品类型', trigger: 'change' }],
        UnitGroupId: [{ required: true, message: '请选择物品单位', trigger: 'change' }],
        Spec: [{ required: true, message: '请输入物品规格', trigger: 'blur' }],
        Brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
        IsBatch: [{ required: true, message: '请选择是否', trigger: 'change' }],
        IsBecode: [{ required: true, message: '请选择', trigger: 'change' }],
        IsQrCode: [{ required: true, message: '请选择', trigger: 'change' }],
        IsSingle: [{ required: true, message: '请选择', trigger: 'change' }],

        BarCode: [{ required: true, validator: validatePass2, trigger: 'blur' }],
        IsPeriodOfValidity: [{ required: true, message: '请选择是否', trigger: 'change' }],
        PeriodOfValidity: [{ required: true, message: '请输入保质期', trigger: 'blur' }],
        PeriodOfValidityUnit: [{ required: true, message: '请选择保质期单位', trigger: 'change' }],
        OutboundRules: [{ required: true, message: '请选择出库规则', trigger: 'change' }]
      },
      title: '',
      displayName: false,
      showTwo: false,
      ParentIdTreeData: [],
      ProcecureId: '',
      value: '',
      MaterialImg: '',
      IsSpecDisabled: true,
      disabled: false
    }
  },
  methods: {
    async inputblur (name) {
      await this.$http
        .post('/PB/PB_MaterialType/GetmaterialTypePinYin?MaterialTypeName=' + this.entity.Name, {})
        .then(resJson => {
          if (resJson.Success) {
            this.$set(this.entity, 'Code', resJson.Data)
          }
        })
    },
    getlistOutboundRules (list) {
      this.$set(this.entity, 'OutboundRules', list[0].Id)
    },
    IsBatchChange (e) {
      if (!this.entity.IsBatch) {
        this.entity.IsPeriodOfValidity = false
      } else {
        this.entity.IsPeriodOfValidity = true
      }
    },
    handleChoose (e) {
      this.entity.UnitGroupId = e.GroupId
      console.log(e)
    },
    IsQrCodechange (e) {
      console.log(e)
      console.log(this.entity.IsQrCode)
      if (this.entity.IsQrCode) {
        this.$set(this.entity, 'IsSingle', false)
      }
    },
    changeIsQrCode () {
      this.$set(this.entity, 'IsBecode', !this.entity.IsQrCode)
    },
    changeIsBecode () {
      this.$set(this.entity, 'IsQrCode', !this.entity.IsBecode)
    },
    IsPeriodOfValidity (e) {
      this.$refs.OutboundRules.getEnum()
      delete this.entity.OutboundRules
      this.entity.EndDate = ''
      this.entity.StartDate = ''
    },
    IsVirtualkeychange (e) {
      if (e.target.value) {
        this.$set(this.entity, 'IsProduct', false)
      } else {
        this.$set(this.entity, 'IsProduct', true)
      }
    },
    changeIsSingle () {
      if (this.entity.IsSingle) {
        this.IsSpecDisabled = this.entity.IsSingle
      } else {
        if (this.entity.IsSpec) {
          this.IsSpecDisabled = !this.entity.IsSpec
        }
      }
    },
    onChange (e) {
      if (e.data === 'e' || e.data === '-') {
        this.$message.warning('请输入正整数')
        this.entity.PeriodOfValidity = 0
        return
      }
      if (this.entity.PeriodOfValidity.split('.').length > 1 && this.entity.PeriodOfValidity.length > 1) {
        this.entity.PeriodOfValidity = Math.floor(this.entity.PeriodOfValidity)
        this.$message.warning('保质期不能有小数')
      }
    },
    forlist (list) {
      list.forEach(item => {
        if (item.children) {
          item.disabled = true
          this.forlist(item.children)
        }
      })
    },
    init () {
      this.visible = true
      this.IsSpecDisabled = true
      this.entity = {
        IsBatch: true,
        IsConsignment: false,
        IsBecode: true,
        IsQrCode: true,
        IsSingle: false,
        IsSpec: true,
        MaxPackageNum: 0,
        PackageNum: 0,
        PeriodOfValidity: '',

        IsPeriodOfValidity: true
      }
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      // 物品类型 tree接口数据展示
      this.$http.post('/PB/PB_MaterialType/GetTreeDataListsAsyncByid', {}).then(resJson => {
        if (resJson.Success) {
          this.forlist(resJson.Data)
          this.MaterialTypeTreeData = resJson.Data
        }
      })

      this.$http.post('/View/View_Base_Department/GetTreeTypeDataLists', { Type: 2 }).then(resJson => {
        if (resJson.Success) {
          this.ParentIdTreeData = resJson.Data
        }
      })
      this.$http.post('/Base_BasicData/Base_DictionaryMain/GetTheDataByDicKey', {
        Condition: 'DicKey',
        Keyword: 'OutboundRules'
      }).then(resJson => {
        this.loading = false
        this.OutboundRulesList = resJson.Data.DictionaryDetailsList
      })
      this.$http.post('/Base_BasicData/Base_DictionaryMain/GetTheDataByDicKey', {
        Condition: 'DicKey',
        Keyword: 'Level'
      }).then(resJson => {
        this.loading = false
        this.LevelList = resJson.Data.DictionaryDetailsList
      })
    },

    SelectOrgan (SelectOrgan) {
      this.entity.StorId = SelectOrgan
      this.storids = SelectOrgan
    },
    openForm (id, title) {
      this.init()
      this.title = title
      this.displayName = false
      this.disabled = true
      if (id) {
        this.displayName = true
        this.loading = true
        this.$http.post('/PB/PB_Material/GetTheData', { id: id }).then(resJson => {
          this.loading = false
          if (resJson.Data.ProcecureId) {
            console.log(resJson.Data.ProcecureId.split(','))
            resJson.Data.ProcecureId = resJson.Data.ProcecureId.split(',')
          }

          // resJson.Data.ProcecureId = ['1463785659637436416', '1463786803302502400']
          this.entity = resJson.Data
          // this.changeIsSingle()
        })
      }
    },
    handleSubmit () {
      console.log(this.entity)
      console.log(this.entity.UnitGroupId)
      this.$refs['form'].validate(valid => {
        console.log(valid)
        if (!valid) {
          return
        }
        // if (this.entity.IsSpec && (this.entity.PackageNum == '' || this.entity.PackageNum == undefined)) {
        //   this.$message.error('请填写包装数量')
        //   return
        // }
        // if (this.entity.IsSpec && (this.entity.MaxPackageNum == '' || this.entity.MaxPackageNum == undefined)) {
        //   this.$message.error('请填写包装数量')
        //   return
        // }
        this.loading = true
        // if (this.entity.ProcecureId) {
        //   var str = ''
        //   this.entity.ProcecureId.forEach(item => {
        //     str += item + ','
        //   })
        //   str = str.substring(0, str.length - 1)
        //   console.log(str)
        //   this.entity.ProcecureId = str
        // } else {
        //   this.entity.ProcecureId = ''
        // }

        var obj = { ...this.entity }
        if (!obj.Code) {
          obj.Code = '1'
        }
        this.$http.post('/PB/PB_Material/SaveData', obj).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    }
  }
}
</script>
<style type='text/css'>
.ant-select-tree {
  max-height: 200px;
}
</style>
